<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!--suppress HtmlRequiredTitleElement -->
<head>
    <th:block th:include="include :: header('个人信息')"/>
    <link rel="stylesheet" th:href="@{/static/assets/system/css/profile.css}"/>
</head>
<body class="layui-layout-body theme-himio">
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左 -->
        <div class="layui-col-sm12 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="userInfoHead">
                            <img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/static/assets/images/head.jpg} : @{${user.avatar}}" alt=""/>
                        </div>
                        <h2 style="padding-top: 20px;">[[${user.userName}]]</h2>
                    </div>
                    <div class="layui-text" style="padding-top: 30px;">
                        <p><i class="fa fa-mobile-phone"></i> [[${user.phoneNumber}]]</p>
                        <p><i class="fa fa-building"></i> [[${user.dept?.deptName}]] / [[${#strings.defaultString(postGroup,'无岗位')}]]</p>
                        <p><i class="fa fa-envelope"></i> [[${#strings.abbreviate(user.email, 16)}]]</p>
                        <p><i class="fa fa-calendar"></i> [[${#strings.replace(user.gmtCreate,'T',' ')}]]</p>
                    </div>
                    <div class="layui-line-dash"></div>
                    <h3>备注</h3>
                    <div class="layui-badge-list" style="padding-top: 6px;">
                        [[${user.remark}]]
                    </div>
                </div>
            </div>
        </div>
        <!-- 右 -->
        <div class="layui-col-sm12 layui-col-md9">
            <div class="layui-card">
                <!-- 选项卡开始 -->
                <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本信息</li>
                        <li>修改密码</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- tab1 -->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form" id="userInfoForm" lay-filter="userInfoForm"
                                  style="max-width: 400px;padding: 25px 10px 0 0;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">登录名称:</label>
                                    <div class="layui-input-block">
                                        <input th:value="${user.loginName}" class="layui-input" disabled/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">用户名称:</label>
                                    <div class="layui-input-block">
                                        <input name="userName" th:value="${user.userName}" class="layui-input"
                                               lay-verify="required" required lay-vertype="tips"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">邮箱:</label>
                                    <div class="layui-input-block">
                                        <input name="email" th:value="${user.email}" class="layui-input"
                                               lay-verify="required" required lay-vertype="tips"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">手机号:</label>
                                    <div class="layui-input-block">
                                        <input name="phoneNumber" th:value="${user.phoneNumber}" class="layui-input" type="tel"
                                               lay-verify="required|phone" required lay-vertype="tips"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">性别:</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="sex" value="0" title="男" th:checked="${user.sex eq '0'}"/>
                                        <input type="radio" name="sex" value="1" title="女" th:checked="${user.sex eq '1'}"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">个人简介:</label>
                                    <div class="layui-input-block">
                                        <textarea name="remark" placeholder="个人简介" class="layui-textarea" th:utext="${user.remark}"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-filter="userInfoSubmit" lay-submit>更新基本信息
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- tab1 -->
                        <div class="layui-tab-item" style="padding-bottom: 20px;">
                            <form class="layui-form" id="resetPwdForm" lay-filter="resetPwdForm"
                                  style="max-width: 400px;padding: 25px 10px 0 0;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">旧密码:</label>
                                    <div class="layui-input-block">
                                        <input name="oldPassword" type="password" class="layui-input"
                                               lay-verify="required" required lay-vertype="tips"/>
                                    </div>
                                </div>
                                <div class="layui-form-item" th:with="chrtype=${@config.getKey('sys.account.chrtype')}">

                                    <label class="layui-form-label layui-form-required">新密码
                                        <th:block th:if="${chrtype != '0'}">
						                            <span class="help-block m-b-none">
								                        <th:block th:if="${chrtype == '1'}"><i lay-tips="密码只能为0-9数字" class="fa fa-info-circle"></i></th:block>
								                        <th:block th:if="${chrtype == '2'}"><i lay-tips="密码只能为a-z和A-Z字母" class="fa fa-info-circle"></i></th:block>
								                        <th:block th:if="${chrtype == '3'}"><i lay-tips="密码必须包含（字母，数字）" class="fa fa-info-circle"></i></th:block>
								                        <th:block th:if="${chrtype == '4'}"><i lay-tips="密码必须包含（字母，数字，特殊字符!@#$%^&*()-=_+）" class="fa fa-info-circle"></i></th:block>
						                            </span>
                                        </th:block>
                                        :</label>
                                    <div class="layui-input-block">
                                        <input name="newPassword" type="password" class="layui-input" id="newPwd"
                                               lay-verify="required" required lay-vertype="tips"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">确认密码:</label>
                                    <div class="layui-input-block">
                                        <input value="" type="password" class="layui-input"
                                               lay-verify="required|equalTo" lay-equalTo="#newPwd" lay-equalToText="两次输入密码不一致" required lay-vertype="tips"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-filter="resetPwdSubmit" lay-submit>保存
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- //选项卡结束 -->
            </div>
        </div>
    </div>
</div>


<!-- js部分 -->
<th:block th:include="include :: footer"/>
<script th:src="@{/static/assets/system/js/profile.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "system/profile";
    var type = [[${#strings.defaultString(@config.getKey('sys.account.chrtype'), 0)}]];
    var charType = parseInt(type);
</script>
</body>
</html>